import React, { Component, PropTypes } from 'react';
import { Text, View, StyleSheet, TouchableHighlight } from 'react-native';
import PxToDp from '../../utils/PxToDp';

class Button extends Component {
  static propTypes = {
    selected: PropTypes.bool,
    onPress: PropTypes.func,
  };
  render() {
    const bgc = this.props.selected ? '#C5DCFF' : '#f0f0f0';
    const textColor = this.props.selected ? '#418cff' : '#121212';
    const maxWidth = this.props.selected ? (88 - 4 - 15) : 88 - 4;
    return (
      <TouchableHighlight
        style={[style.button, { backgroundColor: bgc }]}
        onPress={() => this.props.onPress()}
      >
        <View style={style.inner}>
          <Text
            style={[style.buttonText, { color: textColor, maxWidth }]}
            numberOfLines={1}
          >
            {this.props.children}
          </Text>
        </View>
      </TouchableHighlight>
    );
  }
}

const style = StyleSheet.create({
  button: {
    borderRadius: PxToDp(100),
    height: PxToDp(30),
    width: PxToDp(88),
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: PxToDp(10),
    marginTop: PxToDp(10),
    borderStyle: 'solid',
  },
  buttonText: {
    fontSize: PxToDp(12),
    color: '#999',
  },
  inner: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingRight: PxToDp(2),
    paddingLeft: PxToDp(2),
  },
});

export default Button;
